<script lang="tsx" setup>
/**
 *  月度工资单子单
 */
import {nextTick, ref} from "vue"
import {definePageModel, PageModel} from "@/frame/view/layout/page-model/constructor.ts"
import {defineDialogForm, DialogForm} from "@/frame/components/base/dialog-form/constructor.ts"

/**
 * 弹窗配置
 */
const dialogFormRef = ref()
const dialogFormConfig = defineDialogForm({
  width: "1200px",
  title: "月度工资单子单详情"
})
/**
 * 页面配置
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: "/api/MonthWagess/Item",
  getImmediate: false,
  otherParams: {
    id: null
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    props: {
      stripe: false,
      border: false
    },
    els: [
      {
        label: "年份",
        prop: "year",
        minWidth: 120
      },
      {
        label: "月份",
        prop: "month",
        minWidth: 120
      },
      {
        label: "客户编码",
        prop: "staffCode",
        minWidth: 120
      },
      {
        label: "客户名称",
        prop: "staffName",
        minWidth: 120
      },
      {
        label: "应付款",
        prop: "payMoney",
        minWidth: 120
      },
      {
        label: "社保",
        prop: "socialSecurity",
        minWidth: 120
      },
      {
        label: "其它",
        prop: "otherMoney",
        minWidth: 120
      },
      {
        label: "实际金额",
        prop: "actualMoney",
        minWidth: 120,
      },
      {
        label: "制单时间",
        prop: "createTime",
        minWidth: 200
      }
    ]
  }
})

/**
 * 显示
 */
const show = (params: any) => {
  nextTick(() => {
    if (config.otherParams) {
      config.otherParams.id = params.id
    }
    dialogFormRef.value.show()
    nextTick(() => {
      pageModelRef.value.refreshTableData()
    })
  })
}

/**
 * 暴露
 */
defineExpose({
  show
})
</script>

<template>
  <DialogForm ref="dialogFormRef" :dialogFormModel="dialogFormConfig">
    <template #default>
      <div style="display: flex;height: 500px;">
        <PageModel ref="pageModelRef" :PageModel="config"/>
      </div>
    </template>
  </DialogForm>
</template>
